<!DOCTYPE html>
<html>
<head>
    <title>图片上传与展示</title>
    <meta charset="UTF-8">
</head>
<body>
<h2>上传图片</h2>
<input type="file" id="imageInput" multiple>
<label for="title">标题</label>
<input type="text" id="title" name="title" required><br><br>

<label for="price">价格:</label>
<textarea id="price" name="price" required></textarea><br><br>
<button onclick="uploadImage()">上传图片</button>

<h2>展示图片</h2>
<div id="imageContainer"></div>

<script>
    function uploadImage() {
        var fileInput = document.getElementById('imageInput');
        var files = fileInput.files;

        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append('file', files[i]);
        }
        formData.append('product', JSON.stringify({
            title: document.getElementById('title').value,
            price: document.getElementById('price').value
        }));

        fetch('/api/product/publish', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                if (data.data.length > 0) {
                    data.data.forEach(fileName => {
                        showImage(fileName);
                    });
                    console.log('上传成功');
                } else {
                    console.log('上传失败');
                }
            })
            .catch(error => console.error('Error:', error));
    }

    function showImage(fileName) {
        var imageContainer = document.getElementById('imageContainer');
        var imgElement = document.createElement('img');
        imgElement.src = '/images/' + fileName;
        imgElement.style.width = '200px';
        imgElement.style.height = '200px';
        imgElement.style.margin = '10px';
        imageContainer.appendChild(imgElement);
    }
</script>

<style>
    img {
        width: 200px;
        height: 200px;
        margin: 10px;
    }
</style>
</body>
</html>
